<template>
  <div class="app">
    <div id="mapContainer"></div>
    <div id="searchTool">
      <el-input
        class="input-with-select"
        placeholder="请输入单个号码"
        v-model="searchWords"
        clearable
        @keyup.native.13="handleSearch"
      >
        <el-select v-model="searchClass" slot="prepend" style="width:110px">
          <el-option label="手机号" value="0"></el-option>
          <el-option label="机身号" value="1"></el-option>
          <el-option label="卡串号" value="2"></el-option>
        </el-select>
        <el-button slot="append" type="primary" @click="handleSearch">位置定位</el-button>
      </el-input>
    </div>

    <div class="leftPane" v-show="showSearchResult">
      <el-radio-group v-model="orderby">
        <el-radio label="time">时间顺序优先</el-radio>
        <el-radio label="accurity">位置精度优先</el-radio>
      </el-radio-group>
      <div id="searchResult">
        <ul id="targetlist">
          <li class="record" v-for="(tar,index) in targets">
            <div class="recordinfo">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <div class="recordprefix" :style="'background-color:'+tar.color"></div>
                  <i class></i>
                  <span style="font-weight:bold;padding-right:10px">{{tar.number}}</span>的位置
                  <el-button
                    style="float: right; padding: 11px 0"
                    type="text"
                    @click="deleteTarget(index)"
                  >删除</el-button>
                </div>
                <div class="recordtext">
                  <i class="iconfont iconzuobiaoicon" :style="'color:'+tar.color"></i>
                  <div style="font-weight:bold;width:36px">LBS:</div>
                  <div style="width:220px">
                    <a class="recordaddr" @click="focusLocation(tar,0)">{{tar.lbs.address}}</a>
                  </div>
                  {{tar.lbs.captime}}
                </div>
                <div class="recordtext">
                  <i class="iconfont icondingwei" :style="'color:'+tar.color"></i>
                  <div style="font-weight:bold;width:36px">分光:</div>
                  <div style="width:220px">
                    <a class="recordaddr" @click="focusLocation(tar,1)">{{tar.fg.address}}</a>
                  </div>
                  {{tar.fg.captime}}
                </div>
                <div class="recordtext">
                  <i class="iconfont iconxinhao" :style="'color:'+tar.color"></i>
                  <div style="font-weight:bold;width:36px">警口:</div>
                  <div style="width:220px">
                    <a class="recordaddr" @click="focusLocation(tar,2)">{{tar.jk.address}}</a>
                  </div>
                  {{tar.jk.captime}}
                </div>
              </el-card>
              <div class="el-card_bottom">
                查看最近
                <el-input-number v-model="tar.hisHours" :min="1" :max="24"></el-input-number>小时的足迹
                <el-button
                  size="mini"
                  style="margin-left:10px"
                  @click="searchLatestLocation(tar)"
                >确定</el-button>
                <el-button size="mini" @click="clearLatest(tar)">清除</el-button>
                <div>
                  <ul class="nearlist">
                    <li class="nearli" v-for="(nloc,n) in tar.latest">
                      <div class="nearrecord">
                        <div style="width:50px">{{n+1}} {{nloc.type=='jk'?'基站':'LBS'}}:</div>
                        <div style="width:200px">
                          <a class="recordaddr" @click="focusLocation(tar,4,nloc)">{{nloc.address}}</a>
                        </div>
                        {{nloc.captime}}
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="rightPane" v-show="showPoilist">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="recordprefix" :style="'background-color:'+focusInfo.color"></div>
          <span style="font-weight:bold;padding-right:10px">{{focusInfo.number}}</span>位置点
          <i
            style="float: right; padding: 11px 0"
            class="el-icon-close"
            @click="showPoilist=false"
          ></i>
        </div>
        <div class="targetInfo"></div>
        <p style="margin:5px 0px">周边兴趣点（{{focusInfo.plist.length}}）</p>
        <div class="poilist">
          <ul>
            <li
              class="near"
              v-for="(poi,pindex) in focusInfo.plist"
              :class="poi==selectedpoi?'select':''"
              v-on:click="selectLoc(poi)"
            >
              <div style="position:relative">
                <img :src="poi==selectedpoi?'./src/img/active.png':'./src/img/normal.png'" />
                <span
                  class="nearindex"
                  :style="pindex%10==9?'left: 13px':'left: 16.5px'"
                >{{pindex%10+1}}</span>
                <span class="neartitle">{{poi.name}}</span>
                <span class="nearaddr">{{poi.address}}</span>
                <div class="nearline"></div>
              </div>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import JscMap from "../basic/jsc.basic";
import "../plugins/jsc.vectorTile";

var jscMap, locationMarkerLayer, bsrangeLayer, markerAnimateLayer;

export default {
  data() {
    return {
      orderby: "accurity",
      searchClass: "0",
      searchWords: "",
      showSearchResult: false,
      showPoilist: false,
      targets: [],
      focusInfo: {
        number: "18951650001",
        color: "#3388ff",
        plist: [
          {
            name: "华府国际",
            address: "八里路1号",
            dis: "65m"
          },
          {
            name: "华府国际",
            address: "八里路2号",
            dis: "165m"
          },
          {
            name: "华府国际",
            address: "八里路3号",
            dis: "265m"
          },
          {
            name: "华府国际",
            address: "八里路4号",
            dis: "365m"
          },
          {
            name: "华府国际",
            address: "八里路5号",
            dis: "465m"
          },
          {
            name: "华府国际",
            address: "八里路6号",
            dis: "565m"
          },
          {
            name: "华府国际",
            address: "八里路7号",
            dis: "665m"
          }
        ]
      },
      selectedpoi: {}
    };
  },
  watch: {
    searchClass: function(val) {
      this.searchWords = "";
      this.setblank();
    },
    searchWords: function(val) {
      if (val.replace(/(^s*)|(s*$)/g, "").length == 0) {
        this.setblank();
      }
    }
  },
  mounted: function() {
    jscMap = new JscMap("mapContainer", {
      center: [120, 28],
      streetUrl:
        "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
      vectorUrl: "http://192.103.108.26:8080/mapbox/json/bright-v9-cdn.json",
      defaultMap: "street",
      zoom: 9,
      minZoom: 3,
      maxZoom: 12
    });
    locationMarkerLayer = new maptalks.VectorLayer("locationMarkerLayer").addTo(
      jscMap.map
    );
    bsrangeLayer = new maptalks.VectorLayer("bsrangeLayer").addTo(jscMap.map);
    markerAnimateLayer = new maptalks.VectorLayer("markerAnimateLayer").addTo(
      jscMap.map
    );
    bsrangeLayer.bringToBack();
    markerAnimateLayer.bringToBack();
  },
  methods: {
    handleSearch() {
      var r = Math.floor(16 + Math.random() * 240);
      var g = Math.floor(16 + Math.random() * 240);
      var b = Math.floor(16 + Math.random() * 240);
      var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
      this.targets.splice(0, 0, {
        number: this.searchWords,
        color: color,
        checkedHistory: false,
        hisHours: 2,
        lbs: {
          latlngs: [118.11 + Math.random() * 0.2, 27.9],
          address: "南京市鼓楼区云南路111号",
          captime: "18:33:22"
        },
        fg: {
          latlngs: [118.12, 27.8 + Math.random() * 0.1],
          address: "南京市鼓楼区云南路111号",
          captime: "18:27:29"
        },
        jk: {
          latlngs: [118.15 + Math.random(), 27.9 + Math.random() * 0.1],
          address:
            "南京市鼓楼区云南路111fsdfdsfsdfsdfsdfdsfsdfsdfdsfdsfdsfds号",
          captime: "18:31:12",
          area: [
            [118.14, 27.85],
            [118.16, 27.95],
            [118.15, 28.0]
          ]
        },
        latest: []
      });

      this.nearPois = [
        {
          latlngs: [118.13, 27.33],
          address: "南京市鼓楼区招商银行湖南路支行"
        }
      ];

      this.showSearchResult = true;

      this.loadLocationData();
      this.searchWords = "";
    },

    searchLatestLocation(target) {
      target.latest = [
        {
          captime: "18:21:12",
          address: "南京市浦口区华府国际57",
          type: "jk"
        },
        {
          captime: "18:11:10",
          address: "南京市浦口区华府国际3424",
          type: "lbs"
        },
        {
          captime: "18:01:12",
          address: "南京市浦口区华府国际101",
          type: "jk"
        }
      ];
    },

    clearLatest(target) {
      target.latest = [];
    },

    focusLocation(target, type, nearloc) {
      var location;
      if (type == 0) {
        location = target.lbs.latlngs;
      } else if (type == 1) {
        location = target.fg.latlngs;
      } else if (type == 2) {
        location = target.jk.latlngs;
      }
      jscMap.map.panTo(new maptalks.Coordinate(location));
    },

    loadLocationData() {
      let that = this;
      locationMarkerLayer.clear();
      bsrangeLayer.clear();
      markerAnimateLayer.clear();
      let result = this.targets;
      for (let i = 0; i < result.length; i++) {
        let loopObj = result[i];
        let lbs = loopObj.lbs,
          fg = loopObj.fg,
          jk = loopObj.jk,
          belowText;
        let closerTime = that._getCloserTime(loopObj);
        closerTime == "lbs"
          ? (belowText = {
              textName: loopObj.lbs.captime + loopObj.lbs.address,
              textFill: loopObj.color,
              textHaloRadius: 2,
              textHaloColor: "fff",
              textDy: 12
            })
          : (belowText = {
              textName: loopObj.fg.captime + loopObj.fg.address,
              textFill: loopObj.color,
              textHaloRadius: 2,
              textHaloColor: "fff",
              textDy: 12
            });
        //图标
        new maptalks.Marker(lbs.latlngs, {
          properties: lbs
          // symbol: [
          //   {
          //     markerFile:
          //       i == 0
          //         ? "./src/img/testImg/lbs1.png"
          //         : "./src/img/testImg/lbs2.png",
          //     markerDx: 0,
          //     markerDy: 0
          //   },
          //   closerTime == "lbs" ? belowText : {}
          // ]
        }).addTo(locationMarkerLayer);
        new maptalks.Marker(fg.latlngs, {
          properties: fg
          // symbol: [
          //   {
          //     markerFile:
          //       i == 0
          //         ? "./src/img/testImg/fg1.png"
          //         : "./src/img/testImg/fg2.png",
          //     markerDx: 0,
          //     markerDy: 0
          //   },
          //   closerTime == "fg" ? belowText : {}
          // ]
        }).addTo(locationMarkerLayer);
        new maptalks.Marker(jk.latlngs, {
          properties: jk
          // symbol: [
          //   {
          //     markerFile:
          //       i == 0
          //         ? "./src/img/testImg/jk1.png"
          //         : "./src/img/testImg/jk2.png",
          //     markerDx: 0,
          //     markerDy: 0
          //   },
          //   {}
          // ]
        }).addTo(locationMarkerLayer);
        //基站范围
        bsrangeLayer.addGeometry([
          new maptalks.Polygon(loopObj.jk.area, {
            symbol: {
              polygonFill: "rgba(51,136,255,0.2)",
              lineColor: "#3388ff",
              lineDasharray: [2, 4]
            }
          })
        ]);
        //动画
        that._markerAnimate(loopObj[closerTime]);
      }
      jscMap.fitExtent(locationMarkerLayer);
    },

    deleteTarget(index) {
      this.targets.splice(index, 1);
    },

    selectLoc() {},
    setblank() {},

    refreshLocationData() {},

    _getCloserTime(resultObj) {
      let lbsTime = this._convertTime2Standard(resultObj.lbs.captime),
        fgTime = this._convertTime2Standard(resultObj.fg.captime),
        returnData;
      lbsTime > fgTime ? (returnData = "lbs") : (returnData = "fg");
      return returnData;
    },

    _convertTime2Standard(time) {
      let stTime = new Date(Date.parse(time.replace("-", "/")));
      return stTime;
    },

    _markerAnimate(objArray) {
      console.log(objArray);
      let marker = new maptalks.Marker(objArray.latlngs, {
        symbol: {
          markerType: "ellipse",
          markerFill: "rgb(135,196,240)",
          markerFillOpacity: 1,
          markerLineColor: "#34495e",
          markerLineWidth: 1,
          markerLineOpacity: 1,
          markerLineDasharray: [],
          markerWidth: 40,
          markerHeight: 40,
          markerDx: 0,
          markerDy: 0,
          markerOpacity: 1
        }
      });
      marker.animate(
        {
          symbol: {
            markerWidth: 80,
            markerHeight: 80
          }
        },
        {
          duration: 2000,
          repeat: true
        }
      );

      markerAnimateLayer.addGeometry([marker]);
    }
  }
};
</script>

